<template>
	<view>
		<template v-if="goodsList.length">
			<!-- 筛选 -->
			<view class="filter">
				<text class="active">综合</text>
				<text>销量</text>
				<text>价格</text>
			</view>
			<!-- 商品列表 -->
			<scroll-view class="goods" @scrolltolower="getMore" scroll-y>
				<view v-for="item in goodsList" :key="item.goods_id" class="item" @click="goDetail(item.goods_id)">
					<!-- 商品图片 -->
					<image class="pic" :src="item.goods_small_logo"></image>
					<!-- 商品信息 -->
					<view class="meta">
						<view class="name">{{ item.goods_name }}</view>
						<view class="price">
							<text>￥</text>
							{{ item.goods_price }}
							<text>.00</text>
						</view>
					</view>
				</view>
				<view class="item" @click="goDetail">
					<!-- 商品图片 -->
					<image class="pic" src="http://static.botue.com/ugo/uploads/goods_5.jpg"></image>
					<!-- 商品信息 -->
					<view class="meta">
						<view class="name">神行者电子狗 神行者L70电子狗测速 测速雷达 流动测速 多种警示路段提醒</view>
						<view class="price">
							<text>￥</text>
							168
							<text>.00</text>
						</view>
					</view>
				</view>
				<!-- 加载更多 -->
				<view class="getMore">正在加载...</view>
			</scroll-view>
		</template>
		<view v-else class="tips">{{ msg }}</view>
	</view>
</template>

<script>
import { debounce } from 'lodash';
export default {
	data() {
		return {
			query: '',
			goodsList: [],
			msg: '',
			nextPage: 0,
			hasMore: true
		};
	},
	onLoad(params) {
		// console.log(parmas);
		this.query = params.query;
		this.getGoodsList();
	},
	methods: {
		getMore: debounce(function() {
			// console.log('scroll-view 盒滚动到底部了...');
			// 调用接口获取更多的数据
			this.getGoodsList();
		}, 400),
		goDetail() {
			uni.navigateTo({
				url: '/subpkg/pages/goods/index?id=' + goods_id
			});
		},
		async getGoodsList() {
			// 如果没有更多的数据了，就不要再发请求啦
			if (!this.hasMore) return;

			const { data: res } = await uni.$http.get('/api/public/v1/goods/search', {
				query: this.query,
				pagenum: ++this.nextPage,
				pagesize: 10
			});
			if (res.meta.status !== 200) return uni.$showToast();
			this.goodsList = this.goodsList.concat(res.message.goods);

			// 判断是否还有更多的数据
			this.hasMore = res.message.total > this.goodsList.length;

			this.msg = '空空如也~';
		}
	}
};
</script>

<style scoped lang="scss">
.filter {
	display: flex;
	height: 96rpx;
	line-height: 96rpx;
	border-bottom: 1rpx solid #ddd;

	/* #ifdef H5 */
	position: relative;
	z-index: 99;
	/* #endif */

	text {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		color: #333;

		&.active {
			color: #ea4451;
		}
	}
}

.goods {
	position: absolute;
	width: 100%;
	top: 97rpx;
	bottom: 0;
}

.item {
	display: flex;
	padding: 30rpx 20rpx 30rpx 0;
	margin-left: 20rpx;
	border-bottom: 1rpx solid #eee;

	&:last-child {
		border-bottom: none;
	}

	.pic {
		width: 200rpx;
		height: 200rpx;
		margin-right: 30rpx;
	}

	.meta {
		flex: 1;
		font-size: 27rpx;
		color: #333;
		position: relative;
	}

	.name {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.price {
		position: absolute;
		bottom: 0;

		color: #ea4451;
		font-size: 33rpx;

		text {
			font-size: 22rpx;
		}
	}
}
</style>
